<template>
  <div class="governance">
    <div class="appPc" v-if="$store.state.screenWidth > 1300">
      <div class="backdrop">
        <img
          src="https://ir3.anbio.xyz/uploads/image/6528681748657426.jpg"
          alt=""
        />
        <h1 class="title">Governance</h1>
      </div>

      <div class="first interval">
        <div class="title">Committee Composition</div>
        <div class="parallel">
          <div class="list" v-for="(item, index) in 3" :key="index">
            <img
              v-if="index != 2"
              :src="
                index == 0
                  ? require('../../assets/common/chair.svg')
                  : index == 1
                  ? require('../../assets/common/member.svg')
                  : ''
              "
              alt=""
            />

            <div v-if="index == 2" class="block"></div>
            <div class="text">
              {{
                index == 0
                  ? "Chairperson"
                  : index == 1
                  ? "Member"
                  : "Audit Financial Expert"
              }}
            </div>
          </div>
        </div>

        <div class="table">
          <div class="header">
            <div class="kuai" v-for="(item, index) in 3" :key="index">
              {{
                index == 0
                  ? "Independent Directors"
                  : index == 1
                  ? "Audit Committee"
                  : index == 2
                  ? "Compensation Committee"
                  : ""
              }}
            </div>

            <div class="kuai">
              Nominating Corporate <br />Governance Committee
            </div>
          </div>
          <div class="list" v-for="(info, num) in 3" :key="num">
            <div class="kuai" v-for="(item, index) in 4" :key="index">
              <div v-if="num == 0 && index == 0">Ronghua Xu</div>
              <div v-if="num == 1 && index == 0">Xiaoqiu Zhang</div>
              <div v-if="num == 2 && index == 0">Wenkai Fang</div>

              <div
                v-if="num == 0 && index == 1"
                style="display: flex; align-items: center"
              >
                <img src="../../assets/common/member.svg" alt="" />
                <div
                  style="
                    width: 20px;
                    height: 20px;
                    background: #5d41d0;
                    margin: 0 10px;
                  "
                ></div>
                <img src="../../assets/common/chair.svg" alt="" />
              </div>

              <div
                v-if="num == 1 && index == 1"
                style="display: flex; align-items: center"
              >
                <img src="../../assets/common/member.svg" alt="" />
              </div>

              <div
                v-if="num == 2 && index == 1"
                style="display: flex; align-items: center"
              >
                <img src="../../assets/common/member.svg" alt="" />
              </div>

              <div
                v-if="num == 0 && index == 2"
                style="display: flex; align-items: center"
              >
                <img src="../../assets/common/member.svg" alt="" />
              </div>

              <div
                v-if="num == 1 && index == 2"
                style="display: flex; align-items: center"
              >
                <img src="../../assets/common/member.svg" alt="" />
              </div>

              <div
                v-if="num == 2 && index == 2"
                style="display: flex; align-items: center"
              >
                <img src="../../assets/common/chair.svg" alt="" />
                <img
                  src="../../assets/common/member.svg"
                  alt=""
                  style="margin-left: 10px"
                />
              </div>

              <div
                v-if="num == 0 && index == 3"
                style="display: flex; align-items: center"
              >
                <img src="../../assets/common/member.svg" alt="" />
              </div>

              <div
                v-if="num == 1 && index == 3"
                style="display: flex; align-items: center"
              >
                <img src="../../assets/common/member.svg" alt="" />
                <img
                  src="../../assets/common/chair.svg"
                  alt=""
                  style="margin-left: 10px"
                />
              </div>

              <div
                v-if="num == 2 && index == 3"
                style="display: flex; align-items: center"
              >
                <img src="../../assets/common/member.svg" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="second interval">
        <div class="title">Governance Documents</div>
        <div class="parallel">
          <div class="list" v-for="(item, index) in list" :key="index" @click="governanceStop(item)">
            <div class="span">{{ item.title }}</div>
            <div class="img">
              <img src="../../assets/common/downlaod.svg" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="appH5" v-else>
      <div class="popup-lint"></div>

      <div class="backdrop">
        <img
          src="https://ir3.anbio.xyz/uploads/image/6528681748657426.jpg"
          alt=""
        />
        <h1 class="title">Governance</h1>
      </div>

      <div class="first">
        <div class="title">Committee Composition</div>
        <div class="parallel">
          <div class="list" v-for="(item, index) in 3" :key="index">
            <img
              v-if="index != 2"
              :src="
                index == 0
                  ? require('../../assets/common/chair.svg')
                  : index == 1
                  ? require('../../assets/common/member.svg')
                  : ''
              "
              alt=""
            />

            <div v-if="index == 2" class="block"></div>
            <div class="text">
              {{
                index == 0
                  ? "Chairperson"
                  : index == 1
                  ? "Member"
                  : "Audit Financial Expert"
              }}
            </div>
          </div>
        </div>

        <div class="table">
          <div class="header">
            <div class="kuai" v-for="(item, index) in 3" :key="index">
              {{
                index == 0
                  ? "Independent Directors"
                  : index == 1
                  ? "Audit Committee"
                  : index == 2
                  ? "Compensation Committee"
                  : ""
              }}
            </div>

            <div class="kuai">
              Nominating Corporate <br />Governance Committee
            </div>
          </div>
          <div class="list" v-for="(info, num) in 3" :key="num">
            <div class="kuai" v-for="(item, index) in 4" :key="index">
              <div v-if="num == 0 && index == 0">Ronghua Xu</div>
              <div v-if="num == 1 && index == 0">Xiaoqiu Zhang</div>
              <div v-if="num == 2 && index == 0">Wenkai Fang</div>

              <div
                v-if="num == 0 && index == 1"
                style="display: flex; align-items: center"
              >
                <img src="../../assets/common/member.svg" alt="" />
                <div
                  style="
                    width: 20px;
                    height: 20px;
                    background: #5d41d0;
                    margin: 0 10px;
                  "
                ></div>
                <img src="../../assets/common/chair.svg" alt="" />
              </div>

              <div
                v-if="num == 1 && index == 1"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <img src="../../assets/common/member.svg" alt="" />
              </div>

              <div
                v-if="num == 2 && index == 1"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <img src="../../assets/common/member.svg" alt="" />
              </div>

              <div
                v-if="num == 0 && index == 2"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <img src="../../assets/common/member.svg" alt="" />
              </div>

              <div
                v-if="num == 1 && index == 2"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <img src="../../assets/common/member.svg" alt="" />
              </div>

              <div
                v-if="num == 2 && index == 2"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <img src="../../assets/common/chair.svg" alt="" />
                <img
                  src="../../assets/common/member.svg"
                  alt=""
                  style="margin-left: 10px"
                />
              </div>

              <div
                v-if="num == 0 && index == 3"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <img src="../../assets/common/member.svg" alt="" />
              </div>

              <div
                v-if="num == 1 && index == 3"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <img src="../../assets/common/member.svg" alt="" />
                <img
                  src="../../assets/common/chair.svg"
                  alt=""
                  style="margin-left: 10px"
                />
              </div>

              <div
                v-if="num == 2 && index == 3"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <img src="../../assets/common/member.svg" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="second">
        <div class="title">Governance Documents</div>
        <div class="parallel">
          <div class="list" v-for="(item, index) in list" :key="index" @click="governanceStop(item)">
            <div class="span">{{ item.title }}</div>
            <div class="img">
              <img src="../../assets/common/downlaod.svg" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: "Code of Business Conduct and Ethics",
          herf: "https://ir3.anbio.xyz/uploads/image/2196621748272580.pdf",
        },
        {
          title: "Insider Trading Policy",
          herf: "https://ir3.anbio.xyz/uploads/image/2297211748272807.pdf",
        },
        {
          title: "Executive Compensation Recovery Policy",
          herf: "https://ir3.anbio.xyz/uploads/image/5853471748272848.pdf",
        },
        {
          title: "Nominating Committee Charter",
          herf: "https://ir3.anbio.xyz/uploads/image/5873261748272873.pdf",
        },
        {
          title: "Audit Committee Charter",
          herf: "https://ir3.anbio.xyz/uploads/image/7214231748272902.pdf",
        },
        {
          title: "Compensation Committee Charter",
          herf: "https://ir3.anbio.xyz/uploads/image/6733301748272961.pdf",
        },
      ],
    };
  },
  created() {
    this.scrollTotap();
  },
  methods: {
    scrollTotap() {
      window.scrollTo(0, 0);
    },
    governanceStop(item) {
      window.open(item.herf, '_black')
    }
  },
};
</script>

<style lang="less" scoped>
.governance {
  .appPc {
    .backdrop {
      height: 205px;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
      }

      .title {
        letter-spacing: 1.5px;
        color: #fff;
        position: relative;
        font-size: 48px;
        font-weight: bold;
      }
    }

    .first {
      margin-top: 40px;
      .title {
        font-size: 28px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 60px;
      }

      .parallel {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 40px;
        .list {
          display: flex;
          align-items: center;
          margin-right: 20px;

          img {
            width: 20px;
            height: 20px;
          }

          .block {
            width: 20px;
            height: 20px;
            background: #5d41d0;
          }
          .text {
            font-size: 18px;
            margin-left: 10px;
            color: #2c3341;
            font-weight: 500;
          }
        }

        .list:last-child {
          margin-right: 0;
        }
      }

      .table {
        .header {
          display: flex;
          align-items: center;
          background: #e5f0ff;
          padding: 0 20px;
          box-sizing: border-box;
          border-radius: 5px;
          height: 60px;

          .kuai {
            width: calc((100% / 4));
            font-size: 16px;
            font-weight: 600;
          }
        }

        .list {
          display: flex;
          align-items: center;
          height: 60px;
          padding: 0 20px;
          box-sizing: border-box;
          border-radius: 5px;

          .kuai {
            width: calc((100% / 4));
            font-size: 16px;
            text-align: left;
            font-weight: 600;
          }
        }
      }
    }

    .second {
      margin-top: 80px;
      margin-bottom: 80px;
      .title {
        font-size: 28px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 80px;
      }

      .parallel {
        margin-top: 60px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;

        .list {
          width: calc((100% / 3) - 20px);
          border: 1px solid #ccc;
          border-radius: 10px;
          height: 150px;
          padding: 0 40px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          margin-bottom: 40px;
          cursor: pointer;
          transition: transform 0.2s, 0.2s;

          .span {
            font-size: 22px;
            width: 80%;
            color: #2c3341;
            font-weight: 400;
          }

          .img {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20%;

            img {
            }
          }
        }

        .list:hover {
          transform: scale(1.05);
        }
      }
    }
  }

  .appH5 {
    .backdrop {
      height: 200px;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
      }

      .title {
        letter-spacing: 1.5px;
        color: #fff;
        position: relative;
        font-size: 24px;
        font-weight: bold;
      }
    }
    .first {
      margin: 0 10px;
      margin-top: 40px;

      .title {
        font-size: 18px;
        font-weight: 600;
        text-align: center;
        margin-bottom: 20px;
      }

      .parallel {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 40px;
        .list {
          display: flex;
          align-items: center;
          margin-right: 10px;

          img {
            width: 20px;
            height: 20px;
          }

          .block {
            width: 20px;
            height: 20px;
            background: #5d41d0;
          }
          .text {
            font-size: 13px;
            margin-left: 5px;
            color: #2c3341;
            font-weight: 500;
          }
        }

        .list:last-child {
          margin-right: 0;
        }
      }

      .table {
        .header {
          display: flex;
          align-items: center;
          background: #e5f0ff;
          padding: 10px;
          box-sizing: border-box;
          border-radius: 5px;

          .kuai {
            width: calc((100% / 4));
            font-size: 10px;
            font-weight: 600;
          }
        }

        .list {
          display: flex;
          align-items: center;
          height: 40px;
          padding: 0 10px;
          box-sizing: border-box;
          border-radius: 5px;

          .kuai {
            width: calc((100% / 4));
            font-size: 10px;
            text-align: left;
            font-weight: 600;

            img {
              width: 20px;
              height: 20px;
            }

            div {
              text-align: center;
            }
          }
        }
      }
    }

    .second {
      margin-top: 40px;
      margin-bottom: 40px;
      .title {
        font-size: 24px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 20px;
      }

      .parallel {
        margin: 0 10px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;

        .list {
          width: 100%;
          border: 1px solid #ccc;
          border-radius: 10px;
          height: 120px;
          padding: 0 20px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          cursor: pointer;
          transition: transform 0.2s, 0.2s;

          .span {
            font-size: 18px;
            width: 80%;
            color: #2c3341;
            font-weight: 400;
          }

          .img {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20%;

            img {
            }
          }
        }

        .list:hover {
          transform: scale(1.05);
        }
      }
    }
  }
}
</style>